<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>打印书标</title>
    <meta name="decorator" content="default"/>
    <script src="${ctxStatic}/lodop/LodopFuncs.js" type="text/javascript"></script>
    <style>
        .forth { width: 24%; float: left; }
        .input_ln{width: 100px;}
        .control-label{width: 110px!important;}
        .form-horizontal .controls { margin-left: 120px!important;}
    </style>
</head>
<body>
<br/>
<div id="purchaseForm" class="form-horizontal">
    <div class="control-group" style="color:red;">
      共提取到书标${size}个，你可以进行<a href="javascript:createPage()" class="btn btn-primary">设计预览</a>
    </div>
    <div class="control-group forth">
        <label class="control-label">页面宽度：</label>
        <div class="controls">
            <input id="width" class="input_ln" value="210"/>mm
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">页面高度：</label>
        <div class="controls">
            <input id="height" class="input_ln" value="297"/>mm
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">标签宽度：</label>
        <div class="controls">
            <input id="itemWidth" class="input_ln" value="44"/>mm
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">标签高度：</label>
        <div class="controls">
            <input id="itemHeight" class="input_ln" value="18"/>mm
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">上边距：</label>
        <div class="controls">
            <input id="itemTop" class="input_ln" value="40"/>px
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">左边距：</label>
        <div class="controls">
            <input id="itemLeft" class="input_ln" value="50"/>px
        </div>
    </div>
    <div class="control-group forth">
        <label class="control-label">字体加粗：</label>

        <div class="controls">
            <input id="itemBold" type="checkbox"/>是
        </div>
    </div>
    <div class="control-group">
        <a href="javascript:setPrintSet()" class="btn btn-primary">查看效果</a>
    </div>
</div>

<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=1000 height=607>
    <param name="Caption" value="内嵌显示区域">
    <param name="Border" value="1">
    <param name="Color" value="#C0C0C0">
    <embed id="LODOP_EM" TYPE="application/x-print-lodop" width=1000 height=607 PLUGINSPAGE="install_lodop.exe">
</object>

<script type="text/javascript">
    /**
     *  打印预览
     */
    var LODOP;
    // 上边距
    var mtop = 10;
    //var mtop = 60;
    var mleft = 55;
    // 每页多少个
    var page = 40;
    //var page = 32;
    var new_page_height = 0;
    function createPage(){
        var batchNum = "${batchNum}";
        var snBegin = "${snBegin}";
        var snEnd = "${snEnd}";
        LODOP = getLodop(document.getElementById('LODOP'), document.getElementById('LODOP_EM'));
        LODOP.PRINT_INIT("打印");
        LODOP.SET_PRINT_PAGESIZE(1, "210mm", "280mm", "A4");

        LODOP.SET_SHOW_MODE("DESIGN_IN_BROWSE",1);
        LODOP.SET_SHOW_MODE("SETUP_ENABLESS","11111111000000");//隐藏关闭(叉)按钮
        LODOP.SET_SHOW_MODE("HIDE_GROUND_LOCK",true);//隐藏纸钉按钮

        $.post("${ctx}/book/purchase/searchPlace", {batchNum: batchNum, snBegin: snBegin, snEnd: snEnd}, function (result) {
            var data = result.data;
            var k = 0;
            for (var i = 0; i < data.length; i++) {
                var store = data[i];
                var bar = "<div style='font-size: 18px;text-align: center;'>" +
                        "<div style='height:25px;'>" + store.classcode + "</div>" +
                        "<div style='height:25px;'>" + store.place + "</div>" +
                        "<div style='height:16px;font-size: 13px;'>" + store.banid + "</div>" +
                        "</div>";

                if(i % page == 0 && i>= page){
                    new_page_height += 8;
                }

                // 设置横移
                var x = mleft + (mleft + 110) * (i % 4);
                // 设置竖移
                var y =  new_page_height + mtop +(60 + 67) * Math.floor((i / 4));
                // 打印 索书号和分类
                LODOP.ADD_PRINT_HTM(y, x, "43mm", "18mm", bar);
            }
        });
        LODOP.PRINT_DESIGN();
    }

    function setPrintSet(){
        setPageSize();
        setItemSize()
    }

    function setPageSize(){
        var height = $("#height").val() + "mm";
        var width = $("#width").val() + "mm";
        LODOP.SET_PRINT_PAGESIZE(1, width, height, "A4");
    }

    function setItemSize() {
        var itemCount = LODOP.GET_VALUE('ItemCount', 0);
        var width = $("#itemWidth").val() + "mm";
        var height = $("#itemHeight").val() + "mm";

        var itemTop = parseInt($("#itemTop").val());
        var itemLeft = parseInt($("#itemLeft").val());

        var itemBold = $("#itemBold").is(":checked")?'1':'0';

        for (var i = 1; i <= itemCount; i++) {
            LODOP.SET_PRINT_STYLEA(i, 'ItemBold', itemBold);

            LODOP.SET_PRINT_STYLEA(i, 'ItemWidth', width);
            LODOP.SET_PRINT_STYLEA(i, 'ItemHeight', height);

            var temItemLeft = itemLeft + (itemLeft + 160) * ((i - 1) % 4);
            var temItemTop = itemTop + (itemTop + 82) * Math.floor(((i - 1) / 4));

            LODOP.SET_PRINT_STYLEA(i, 'ItemTop', temItemTop);
            LODOP.SET_PRINT_STYLEA(i, 'ItemLeft', temItemLeft);
        }
    }
</script>
</body>
</html>